<template>
 <div class="wrapper">
   <HeaderPart>
     门店订单
   </HeaderPart>
   <div class="order-list">
      <p>所有订单:</p>
     <ul
         v-for="item in orderList"
         :key="item.id"
     >
       <li>
         <div class="order">
            <p>订单号:{{item.id}}</p>
            <p>用户编号:{{item.userId}}</p>
            <p>订购时间{{moment(new Date(item.orderDate)).format('YYYY-MM-DD hh:mm:ss')}}</p>
            <p>订购总价{{item.orderTotal}}</p>
            <p>状态:{{orderStatus(item.isBusinessAgree)}}</p>
            <p v-if="item.isRefund===1">退款状态:已退款</p>
            <el-button @click="toConfirm(item)" v-if="item.isBusinessAgree===0" type="primary"> 确认状态 </el-button>
            <el-button @click="refund(item)" v-if="item.isBusinessAgree===1 && item.isRefund===0" type="primary"> 退款 </el-button>
         </div>
       </li>
     </ul>
   </div>
 </div>
</template>

<script setup>
import HeaderPart from "@/components/common/HeaderPart";
import {useRoute} from "vue-router";
import {onBeforeMount, ref} from "vue";
import {confirmOrder, getShopOrders} from "@/utils/api/orderManager";
import moment from "moment";
import {orderStatus} from "@/mixin/status";


const shopId = parseInt(useRoute().params.shopId)
onBeforeMount(()=>{
  //获得订单详情
  getBusinessOrder()
})
// 定义一个订单列表
const orderList = ref([])
const getBusinessOrder =async ()=>{
  const res = await getShopOrders({shopId})
  orderList.value = res.data
}

// 确认状态
const toConfirm = async (item)=>{
  item.isBusinessAgree = 1
  await confirmOrder(item)
  await getBusinessOrder()
}
// 退款
const refund =async (item)=>{
  item.isRefund = 1
  await confirmOrder(item)
  await getBusinessOrder()
}




</script>

<style scoped>
.wrapper{
  height: 100vh;
  width: 100vw;
}
.wrapper .order-list{
  margin-top: 5rem;
  padding: 0 20px;
}
.order-list ul{
  list-style: none;
  padding-inline-start: 0;
  padding-left: 20px;
}
.order-list ul li {
  margin-bottom: 20px;
}
.order-list ul li .order p{
  font-size: 15px;
  font-weight: 500;
  margin: 5px 0;
}
.wrapper .order-list p {
  font-size: 20px;
  font-weight: 700;
}
</style>